<!---vue鉴权
场景一：登录验证时，有一个用户名密码数组，然后根据当前用户输入的用户名和密码判断是否相同，相同登录成功，反之失败，
逻辑：先遍历数组，把输入的用户名和密码和数组里用户名和密码比对，先定一个失败的状态，
如果相同提示成功，并且修改状态为成功

问题：为什么forEach的this取不到vue data里的值？如何解决
因为js的函数会创建新的作用域
1.箭头函数箭头函数没有this引用，所以不会覆盖外面的this
2.先在外部定义原先this,

		{
      path: '/',
      name: 'homePage',//登录后，跳转到的页面
      component: homePage
    },
场景二：登录后，根据不同用户展示不同菜单？在homePage里写公共左侧导航组件？
后台提供：rules,代表不同权限看不同的内容
userArr:[
					{
						"username":"admin",
						"password":"123456",
						"rules":"/user/list,/task/list"
					},
					{
						"username":"admin1",
						"password":"123457",
						"rules":"/user/list"
					}
				],

需要做啥：先登录后，跳转页homePage,先写成功后，跳转到homePage的路由
先写公共左侧导航组件leftNav
第一写：父组件homePage向子组件leftNav传值？
模拟组件传值场景：homePage父组件有个input框，修改input框的值(比如写789)，子组件的id（也跟着变789），跟着变化，
方法：先在子组件写定义父组件需要传的值(id)，在子组件props里定义这个值eg：id,
在父组件中,引用子组件(先写标签leftNav，然后import,再去components定义)，在子组件对应标签里v-bind
场景三：第一步 根据登录页loginPage的用户 获取相应menu 并缓存至本地

第二步 进入homePage 页 读取menu本地信息 并其传递给菜单子组件（leftNav）

-->
<template>
  <div>
    <el-form :model="form" :rules="rules2" ref="form" label-position="left" label-width="0px" class="demo-ruleForm card-box loginform">
      <h3 class="title">{{systemName}}</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="form.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="form.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item v-show="requireVerify" prop="verifyCode">
        <el-input type="text" v-model="form.verifyCode" auto-complete="off" placeholder="验证码" class="w-150"></el-input>
        <img :src="verifyUrl" @click="refreshVerify()" class="verify-pos"/>
      </el-form-item>
      <el-checkbox v-model="checked" style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" v-loading="loading" @click.native.prevent="handleSubmit2()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
		userArr:[//模拟从后台获取的，可以登录的账号
			{
				"username":"admin",
				"password":"123456",
				"menu":'[{"id":57,"title":"用户管理","url":"","child":[{"title":"用户列表","url":"/homepage/user/list"},{"title":"用户添加","url":"/homepage/user/add"}]}]',//左侧菜单导航
				"authList":'/,/homepage/user/add,/homep age/user/list'//对应账号可以访问的链接,
			},
			{
				"username":"admin1",
				"password":"123457",
				"menu":'[{"id":57,"title":"用户管理","url":"","child":[{"title":"用户列表","url":"/homepage/user/list"}]}]',
			 	"authList":'/,/homepage/user/list'//是指to.path，routes里的path
			}
		],
        title: '', 
        systemName: '',
        loading: false,
        form: {
          username: '',
          password: '',
          verifyCode: ''
        },
        requireVerify: false,
        verifyUrl: '',
        verifyImg: window.HOST + 'admin/base/getVerify',
        rules2: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          verifyCode: [
            { required: false, message: '请输入验证码', trigger: 'blur' }
          ]
        },
        checked: false,
		isFind:false,//先写个变量记录找没找到的状态，最后的结果
      }
    },
	created(){
	    //alert(23);
		//this.isLogin();
	},
    methods: {
      refreshVerify() {
        this.verifyUrl = ''
        setTimeout(() => {
          this.verifyUrl = this.verifyImg + '?v=' + moment().unix()
        }, 300)
      },
      handleSubmit2() {
		   /*方法一：箭头函数*/
				this.userArr.forEach((value)=>{
					console.log(this);//匿名函数没创建this
					if(this.form.username==value.username&&this.form.password==value.password){
					  this.isFind=true;
						alert("登录成功");
						//console.log("登录成功时"+value.menu);
　　 					localStorage.setItem("menuInfo",value.menu);                       //第一个是key，第二个value,左侧菜单导航
						localStorage.setItem("authList",value.authList);//对应用户名可以访问的链接 
						this.$router.push({path: '/'});
					}
				})
				if(!this.isFind){
					alert("登录失败")
				}
				
		  /*方法二：外部定义*/
		  /*
		  let innerThis=this;
		  console.log(this);//外面的this:指vue对象
			this.userArr.forEach(function(value){
				console.log("forEach的this:"+this);//匿名函数没创建this，undefind
				if(innerThis.form.username==value.username&&innerThis.form.password==value.password){
				   console.log("登录成功");
				   this.$router.push({path: '/homePage'});
				}
			})
			
			if(!this.isFind){
				alert("登录失败")
			}
		 //*/
      },
	  isLogin(){
		if(localStorage.getItem("menuInfo")){
		    //alert(222);
			this.$router.push({path: '/'});
		}
	  },
      checkIsRememberPwd() {
        if (Cookies.get('rememberPwd')) {
          let data = {
            rememberKey: Lockr.get('rememberKey')
          }
          this.apiPost('admin/base/relogin', data).then((res) => {
            this.handelResponse(res, (data) => {
              this.resetCommonData(data)
            })
          })
        }
      }
    },
   
  }
</script>

<style>
.verify-pos {
	position: absolute;
	right: 100px;
	top: 0px;
}
.card-box {
	padding: 20px;
	/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	background-clip: padding-box;
	margin-bottom: 20px;
	background-color: #F9FAFC;
	margin: 120px auto;
	width: 400px;
	border: 2px solid #8492A6;
}

.title {
	margin: 0px auto 40px auto;
	text-align: center;
	color: #505458;
}

.loginform {
	width: 350px;
	padding: 35px 35px 15px 35px;
}
</style>